<template>
	<view class="content">
		<view class="title"><u-tabs :list="brotherCategory" @click="click" activeStyle="color:#323233" lineColor="#ee0a24" lineWidth="65rpx"></u-tabs></view>
		<view class="desrciption">
			<view class="nickname">{{ currentCategory.name }}</view>
			<view class="nickname-des">{{ currentCategory.front_desc }}</view>
		</view>
		<cd-goods-list :goodsList="goodsList" class="background"></cd-goods-list>
	</view>
</template>

<script>
import { ApiGetCate, ApiGoodsList } from '@/utils/api.js';
import cdGoodsList from '@/components/cd-goods-list/cd-goods-list.vue';
export default {
	data() {
		return {
			id: null,
			brotherCategory: [],
			currentCategory: {},
			goodsList: []
		};
	},
	components: {
		'cd-goods-list': cdGoodsList
	},
	async onLoad(e) {
		this.id = e.id;
		let res = await ApiGetCate(this.id);
		let res1 = await ApiGoodsList({
			categoryId: this.id,
			page: 1,
			size: 1000
		});
		// console.log(res1);
		this.goodsList = res1.data.goodsList;
		let { brotherCategory, currentCategory } = res.data;
		this.brotherCategory = brotherCategory;
		this.currentCategory = currentCategory;
		// console.log(res.data);
	},
	methods: {
		async click(e) {
			this.id = e.id;
			let res = await ApiGetCate(this.id);
			let { currentCategory } = res.data;
			this.currentCategory.name = currentCategory.name;
			this.currentCategory.front_desc = currentCategory.front_desc;
			// console.log(res.data.currentCategory)
			// console.log(this.id)
			let res1 = await ApiGoodsList({
				categoryId: this.id,
				page: 1,
				size: 1000
			});
			this.goodsList = res1.data.goodsList;
		}
	}
};
</script>

<style lang="scss">
.content {
	height: 100vh;
	background-color: #efefef;
	.title {
		height: 80rpx;
		background-color: #fff;
	}
	.desrciption {
		height: 145rpx;
		text-align: center;
		overflow: hidden;
		.nickname {
			font-size: 35rpx;
			margin: 30rpx auto;
		}
		.nickname-des {
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
	}
	.background {
		background-color: #fff;
	}
}
</style>
